<template>
  <el-dialog
    title="新建谱子"
    :visible.sync="visible"
    width="800px"
    :before-close="handleClose"
    class="create-score-dialog"
  >
    <el-form :model="form" :rules="rules" ref="form" label-width="90px" class="create-score-form">
      <el-row :gutter="40">
        <el-col :span="12">
          <el-divider>基础信息</el-divider>
          <el-form-item label="标题" prop="title">
            <el-input v-model="form.title" placeholder="请输入标题" size="small" />
          </el-form-item>
          <el-form-item label="副标题" prop="subtitle">
            <el-input v-model="form.subtitle" placeholder="请输入副标题" size="small" />
          </el-form-item>
          <el-form-item label="作曲" prop="composer">
            <el-input v-model="form.composer" placeholder="请输入作曲者" size="small" />
          </el-form-item>
          <el-form-item label="作词" prop="lyricist">
            <el-input v-model="form.lyricist" placeholder="请输入作词者" size="small" />
          </el-form-item>
          <el-form-item label="水印名称" prop="copyright">
            <el-input v-model="form.copyright" placeholder="请输入水印名称" size="small" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-divider>曲谱信息</el-divider>
          <el-form-item label="节拍" prop="beat">
            <el-select v-model="form.beat" placeholder="请选择节拍" size="small">
              <el-option label="4/4" value="4/4" />
              <el-option label="3/4" value="3/4" />
              <el-option label="2/4" value="2/4" />
              <el-option label="6/8" value="6/8" />
            </el-select>
          </el-form-item>
          <el-form-item label="调号" prop="key">
            <el-select v-model="form.key" placeholder="请选择调号" size="small">
              <el-option label="Cb" value="Cb" />
              <el-option label="Gb" value="Gb" />
              <el-option label="Db" value="Db" />
              <el-option label="Ab" value="Ab" />
              <el-option label="Eb" value="Eb" />
              <el-option label="Bb" value="Bb" />
              <el-option label="F" value="F" />
              <el-option label="C" value="C" />
              <el-option label="G" value="G" />
              <el-option label="D" value="D" />
              <el-option label="A" value="A" />
              <el-option label="E" value="E" />
              <el-option label="B" value="B" />
              <el-option label="F#" value="F#" />
              <el-option label="C#" value="C#" />
            </el-select>
          </el-form-item>
          <el-form-item label="谱表类型" prop="scoreType">
            <el-select v-model="form.scoreType" placeholder="请选择谱表类型" size="small">
              <el-option label="单声部" value="单声部" />
              <el-option label="双声部" value="双声部" />
              <el-option label="三声部" value="三声部" />
              <el-option label="四声部" value="四声部" />
            </el-select>
          </el-form-item>
          <el-form-item label="速度数值" prop="tempo">
            <div style="display: flex; align-items: center; gap: 16px;">
              <el-slider v-model="form.tempo" :min="1" :max="300" style="flex: 1;" />
              <span style="margin-left: 8px;">{{ form.tempo }} bpm</span>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose" class="custom-btn">取消</el-button>
      <el-button type="primary" @click="handleSubmit" class="custom-btn primary-btn">创建</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'CreateScoreDialog',
  props: {
    visible: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      form: {
        beat: '4/4',
        key: 'C',
        scoreType: '双声部',
        tempo: 120,
        title: '标题',
        subtitle: '副标题',
        composer: '作曲者',
        lyricist: '作词者',
        copyright: '双手简谱'
      },
      rules: {
        beat: [{ required: true, message: '请选择节拍', trigger: 'change' }],
        key: [{ required: true, message: '请选择调号', trigger: 'change' }],
        scoreType: [{ required: true, message: '请选择谱表类型', trigger: 'change' }],
        tempo: [{ required: true, message: '请输入速度', trigger: 'blur' }],
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        subtitle: [{ required: true, message: '请输入副标题', trigger: 'blur' }],
        composer: [{ required: true, message: '请输入作曲者', trigger: 'blur' }],
        lyricist: [{ required: true, message: '请输入作词者', trigger: 'blur' }],
        copyright: [{ required: true, message: '请输入水印名称', trigger: 'blur' }]
      }
    }
  },
  methods: {
    ...mapActions(['setScoreDraft']),
    handleClose() {
      this.$emit('update:visible', false)
    },
    handleSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          await this.setScoreDraft(this.form)
          this.$emit('update:visible', false)
          this.$router.push('/editor')
        }
      })
    }
  }
}
</script>

<style scoped>
.create-score-dialog :deep(.el-dialog__body) {
  padding: 20px 40px;
}
.create-score-form {
  margin-top: 20px;
}
.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.custom-btn {
  border-radius: 8px;
  min-width: 90px;
  height: 36px;
  font-size: 12px;
}
.primary-btn {
  width: 90px;
  background: #409eff;
  border-color: #409eff;
  color: #fff;
  font-weight: 600;
}
.primary-btn:hover {
  background: #66b1ff;
  border-color: #66b1ff;
}
</style> 